'use client';

import { useRouter } from 'next/navigation';
import { Card, CardBody, CardFooter } from "@heroui/card";
import { Image } from "@heroui/image";
import { Chip } from "@heroui/chip";

interface MangaCardProps {
    id?: string
    title?: string
    cover_url?: string
    author?: string
    rating?: number
    status?: "连载中" | "已完结" | "暂停"
    tags?: string[]
    chapters?: number
}

export default function MangaCard({
    id = "1",
    title = "测试标题",
    cover_url = "https://heroui.com/images/card-example-3.jpeg",
    author = "作者名",
    rating = 4.8,
    status = "连载中",
    tags = ["冒险", "热血"],
    chapters = 156
}: MangaCardProps) {
    const router = useRouter();
    const statusColor = {
        "连载中": "success",
        "已完结": "primary", 
        "暂停": "warning"
    }[status] as "success" | "primary" | "warning";

    const handleCardClick = () => {
        router.push(`/content/mangas/${id}`);
    };

    return (
        <Card
            className="w-full max-w-[280px] hover:scale-105 transition-transform duration-300 shadow-lg hover:shadow-xl cursor-pointer"
            isPressable
            onPress={handleCardClick}
        >
            <CardBody className="p-0 relative">
                <div className="relative overflow-hidden rounded-t-lg">
                    <Image
                        alt={title}
                        className="w-full object-cover h-[320px] hover:scale-110 transition-transform duration-500"
                        src={cover_url}
                        removeWrapper
                    />
                    
                    <Chip 
                        color={statusColor}
                        size="sm"
                        className="absolute top-2 left-2 z-10 font-medium"
                    >
                        {status}
                    </Chip>
                    
                    <div className="absolute top-2 right-2 bg-black/70 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1 z-10">
                        <svg className="w-3 h-3 text-yellow-400 fill-current" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        <span className="text-white text-xs font-medium">{rating}</span>
                    </div>
                    
                    <div className="absolute bottom-2 right-2 bg-white/20 backdrop-blur-sm rounded-full p-2 hover:bg-white/30 transition-colors cursor-pointer z-10">
                        <svg className="w-4 h-4 text-red-500 fill-current" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd"/>
                        </svg>
                    </div>
                </div>
            </CardBody>

            <CardFooter className="flex-col items-start p-3 bg-gradient-to-t from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
                <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-1 line-clamp-2 leading-tight">
                    {title}
                </h3>
                
                <div className="flex justify-between items-center w-full mb-2">
                    <span className="text-xs text-gray-600 dark:text-gray-400">
                        {author}
                    </span>
                    <span className="text-xs text-gray-500 dark:text-gray-500">
                        第{chapters}话
                    </span>
                </div>
                
                <div className="flex gap-1 flex-wrap">
                    {tags.map((tag, index) => (
                        <Chip 
                            key={index}
                            size="sm" 
                            variant="flat"
                            color="secondary"
                            className="text-xs px-2 py-1"
                        >
                            {tag}
                        </Chip>
                    ))}
                </div>
            </CardFooter>
        </Card>
    )
}